<template>
<div class="unified-message-container">
    <!-- 使用通用导航栏组件 -->
    <tab-nav-bar :tabs="navTabs" :active-tab="activeTab" @tab-change="switchTab" />

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 点赞消息 -->
        <div v-if="activeTab === 'likes'" class="tab-content">
            <likes-content :search-text="searchText" :placeholder="getPlaceholder('likes')" @search="onSearch" />
        </div>

        <!-- 评论消息 -->
        <div v-else-if="activeTab === 'comments'" class="tab-content">
            <comments-content :search-text="searchText" :placeholder="getPlaceholder('comments')" @search="onSearch" />
        </div>

        <!-- 粉丝消息 -->
        <div v-else-if="activeTab === 'followers'" class="tab-content">
            <followers-content :search-text="searchText" :placeholder="getPlaceholder('followers')"
                @search="onSearch" />
        </div>

        <!-- 通知消息 -->
        <div v-else-if="activeTab === 'notices'" class="tab-content">
            <notices-content :search-text="searchText" :placeholder="getPlaceholder('notices')" @search="onSearch" />
        </div>
    </div>
</div>
</template>

<script>
import TabNavBar from '@/components/TabNavBar.vue'
import LikesContent from './components/LikesContent.vue'
import CommentsContent from './components/CommentsContent.vue'
import FollowersContent from './components/FollowersContent.vue'
import NoticesContent from './components/NoticesContent.vue'

export default {
    name: 'UnifiedMessagePage',
    components: {
        TabNavBar,
        LikesContent,
        CommentsContent,
        FollowersContent,
        NoticesContent
    },
    data() {
        return {
            activeTab: 'likes', // 默认显示点赞
            searchText: '', // 搜索文本

            // 导航栏选项卡数据
            navTabs: [
                { label: '点赞', value: 'likes' },
                { label: '评论', value: 'comments' },
                { label: '新粉丝', value: 'followers' },
                { label: '通知', value: 'notices' }
            ]
        }
    },
    created() {
        // 根据路由参数设置当前标签
        const tab = this.$route.params.type
        if (tab && ['likes', 'comments', 'followers', 'notices'].includes(tab)) {
            this.activeTab = tab
        }
    },
    methods: {
        // 切换标签
        switchTab(tab) {
            if (this.activeTab === tab) return
            this.activeTab = tab
            this.searchText = ''

            // 更新路由，但不重新加载页面
            this.$router.replace(`/messages/${tab}`)
        },

        // 处理搜索
        onSearch(text) {
            this.searchText = text
        },

        // 获取搜索占位符
        getPlaceholder(tab) {
            switch (tab) {
                case 'likes':
                    return '搜索点赞消息'
                case 'comments':
                    return '搜索评论消息'
                case 'followers':
                    return '搜索新粉丝'
                case 'notices':
                    return '搜索通知'
                default:
                    return '搜索消息'
            }
        }
    }
}
</script>

<style scoped>
.unified-message-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f7f8fa;
}

.content-area {
    flex: 1;
    overflow: hidden;
}

.tab-content {
    height: 100%;
    overflow: hidden;
}

/* 适配暗黑模式 */
@media (prefers-color-scheme: dark) {
    .unified-message-container {
        background-color: #121212;
    }
}

/* 适配平板和桌面屏幕 */
@media (min-width: 768px) {
    .unified-message-container {
        max-width: 600px;
        margin: 0 auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }
}
</style>